Ideas for Subtle Hover Effects

Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.

By Manoela Ilic in Playground on
Demo Code

It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise.

The techniques we are using for these hover effects involve 3D transforms and some pseudo-element transitions. Note that these will only work in modern browsers.

Sadly, transitions on text in Firefox are not very smooth which influences most of the effects.

The beautiful photography is from Unsplash, a site that brings you 10 free hi-resolution photos every 10 days. The icons used in one of the hover styles is from the Feather icon set by Cole Bemis.

This article was updated on 28 of October 2014 and we’ve added a second set of effects.

For the structure we are simply using a grid with figures:

<div class="grid">

	<figure class="effect-lily">
		<img src="img/1.jpg" alt="img01"/>
		<figcaption>
			<h2>Nice <span>Lily</span></h2>
			<p>Lily likes to play with crayons and pencils</p>
			<a href="#">View more</a>
		</figcaption>			
	</figure>

	<!-- ... -->
	
</div>

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

With some general styles defined for the grid and its items, we then specify the individual effects.

Sadie_Effect

The following effect, called “Sadie”, will have a pseudo-element with a linear gradient slide in from the bottom and reveal some more text.

The title will change color:

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	content: '';
	opacity: 0;
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #484c61;
	transition: transform 0.35s, color 0.35s;
	transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
	color: #fff;
	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	transform: translate3d(0,0,0);
}

We’ve omitted the prefixed properties for the sake of brevity; you will find them in the style sheet.

There are a lot of possibilities and these effects are just a small collection for your inspiration. We hope you enjoy it!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Shape Slideshow with Clip-path

Slideshow with Filter Reveal Effect

On-Scroll Letter Animations

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 157

Comments are closed.

  1. Lovely effect ML, well done (again!).

    Can anyone explain why on Safari the images are not scaled? It appears they only show the top-left corner of the image, maybe 10% of the total image as it should be displayed, kind of like it’s zoomed in on this part of the image.

    Don’t get this effect on other browsers, or on mobile iOS…

    Any help appreciated!

    Greg

    • Hi Greg,
      I am having the same issue with images being skewed in Safari. Any luck getting a solution?

    • Hi Lizie, no – no reply as yet. Also would be interested if anyone has found a way to get the hover-effect to link on ‘click’… saw one idea to wrap the with a link but that didn’t seem to work for me… 🙁

    • Hi Greg,
      It’s been a few month and I’m circling back around to this scaled images issue in Safari. Still no answers?

    • Hi Greg,

      So, I found a solution. It’s a change in the CSS. For .grid figure img — comment out any min-height and min-width that you may have there. This is working for me.

      .grid figure img {
      position: relative;
      display: block;
      /* min-height: 100%;
      max-width: 100%;*/
      opacity: 0.8;
      }

  2. Hi can some one tell me in what versions of browsers this plugin works well
    in mobile – android, ios, windows
    in desktop – IE , Chrome , Safari , Firefox and Opera

  3. I’m not sure why you have the link inside the figure. You can’t click on them in IE9 or IE10 in my testing. I wrapped the figure tag with the link tag and you can now click on the effects in IE.

    • Hi Brian, I am looking at trying to get the images and captions to ‘link’ after the hover. I tried adding an <ahref tag either side of the tags but that didn’t seem to work for me… can you post your code in a reply please? Many thanks. Greg

  5. Aww it makes me so sad. It used to work I guess, but today when I installed it and tried adding the plugin it said:

    “Unpacking the package…

    Installing the plugin…

    The package could not be installed. No valid plugins were found.

    Plugin install failed.”

    In my wordpress.

  6. I am assuming we just add this to my child themes style.css sheet? or is there anything else I need to do?

  7. Is anyone gettting an issue were every once in a while the image doesnt show, just the overlay color?

  9. Hi,
    can anyone provide some details on installation ?

    Any help is highly appreciated

  11. Hi, do you know why i can’t get to work the sadie effect on my iphone, but i can in my android?

  13. Hi… I have implemented the “Julia” effect with success in to Weebly. One thing though – I can’t change the color of the text in the headlines as I want. I found out to do it by changing the color of my “Paragraph Titles” in the set-up of Weebly. But I dont want to change the color on all other Paragraph Titles. Is there any other way to change the color of the text?

    Thanks in advance!

    • Hey Silas, just wondering how you were able to implement it in Weebly? I’m having a bit of trouble doing so. Thanks!

  14. Hi. Is there someone who can give me some information how to implement this into a SharePoint list? If I could get this working I’ll do a Step-by-Step Guide how to implement it in SharePoint if somebody interessted. But first, how do I have to start?

  15. Hi Mary Lou,

    Have you tried using Sass (do SCSS format) or Less? It would make your CSS codes a lot easier to read and improve upon.

    Please feel free to contact me if you need help getting started on SCSS. I do recommend SCSS.

    Jon

  16. hello!!
    thank you so much “Layla effect” it’ very cute!!

    But I have a problem right now… :S I want to apply “light box” to my gallery and I don’t know where look to start XD
    I’m a beginner forgive me 😛
    I would like to apply to each image a multi image gallery….Is it possible? 🙂

    thank you so much!

  17. I have been trying to make an updated site concept using the tutorial here. I wanted to add a picture that fills up the entire horizontal screen. However I cannot do so as it will automatically shrink the size to meet the scale. I have tried to look and find a way to undo this however I cannot find out how. could someone tell me or help?

  19. Hello
    I write you from Spain
    My English is not very good
    How I can use your ideas for Subtle Hover Effects on a template made with Joomla 3
    Thank you

  21. Hi
    I love the layla effect. I am a complete newbie. Is there any way you can help me how can I add the Lyla effect to my pictures on my website? I have already downloaded the source, but dont really know what to do with it.

    Here is what I have done so far.
    1. Add new Row in my page
    2. Add Visual Editor to the row
    3. Add new image in the visual editor.

    After this i tried to add the Lyla Effect code (from set1 file in HoverEffectIdeas\css) to the CSS Styles next to my Visual Editor and saved it. Nothing happened.

    I definitely know i am doing it wrong. Would highly appreciate any help.

    Rgds
    Joy

  22. Hi I am a newbie to webdesigning in wordpress. I sutumbled upon your Layla effect and fell in love with it.

    I have downloaded the source file, but dont know what to do with it. I know i have to copy paste it somewhere, but dont know where, is it in the theme’s CSS (under EDITOR)? or should it be on the page where i want the images with Layla effect?

    I tried to add a row to my page and then add new Visual Editor to it, then paste the Layla code in the CSS settings text box right next to it, not much of help. Please dont laugh if this was something really obvious 🙂

    Will be great full for any help on this one.

  23. Hi mary,
    i’m using the “layla” Hover effect
    everything was working great on every browser for a long time
    but today iv’e noticed that on chrome the grid is braking and the hover dosent work
    iv’e ask around, and no one could figure it out
    and then i remembered that i had this same problem a while ago when chrome was updated and someone wrote here a line of code to put in the “layla” css sheet that fix it (and it seems that now has stooped working)

    do you know of this problem? any suggestions?

    tnx
    shiran

  25. Great effects. They’re really impressive. I implemented them into a site I’m currently developing. Seemed to work fine across all browsers until I tested it on iPhones and iPads and the Click state for “OSCAR http://tympanus.net/Development/HoverEffectIdeas/“, unfortunately didn’t seem to do anything. Is anyone else experiencing this issue on iPhones or iPads?

  26. Is it possible to do the same effect on a background image instead to do it directly on an image? Thanks to everybody who will answer!

  27. Hi Mary Lou

    First off, I absolutely LOVE this. Brilliant JOB!

    That said! I tried to use this on a website I’m busy with (based on the Skeleton Framework) and my images are square and the grid is not based on “Grid” but “one Column” “two columns” etc. I assumed everything would just work, but it the hover content does not scale to fit within my square image.

    Any advice?

    Thank you in advance!

    JP

  28. Hi Mary Lou,

    You effects and code is great! Thank you for the resource.

    I am creating an accessible website and need the effects to happen on focus. I have been able to to get it to work by adding css for focus states. The only issue I find is that I need to add an tabindex=”0″ to the figure caption for it to work. But then I cannot press enter to activate the ahref link.

    Is there anyway this can be modified to get keyboard focus and activated by pressing enter? Since all animations on done on the figure elements, is there anyway to set the focus state on the ahref instead of the figure?

    Here is the code for one box
    <figure class="effect-sarah" tabindex="0"> <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/thumbs/contact-thumb.jpg" alt="img20" /> <figcaption> <h2>Contact</h2> <p>Get in touch</p> <a href="<?php echo network_home_url( 'contact' ); ?>">View more</a> </figcaption> </figure>

    and the css I modified

    figure.effect-sarah { background: #0087bf; } figure.effect-sarah img { max-width: none; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure.effect-sarah:hover img, figure.effect-sarah:focus img { opacity: 0.4; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } figure.effect-sarah figcaption { text-align: left; } figure.effect-sarah h2 { position: relative; overflow: hidden; padding: 0.5em 0; font-weight: bold; } figure.effect-sarah h2::after { position: absolute; bottom: 0; left: 0; width: 14%; height: 3px; background: #3f474e; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-80%, 0, 0); transform: translate3d(-80%, 0, 0); } figure.effect-sarah:hover h2::after, figure.effect-sarah:focus h2::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } figure.effect-sarah p { padding: 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } figure.effect-sarah:hover p, figure.effect-sarah:focus p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

    Hope this makes sense.

    Thanks For your code!
    Mike

  30. Hi Mary Lou, I love these hover effects and they work fantastic!
    However the site I added them to (using Ming and Julia) is an existing Joomla template / site (which conflicted a lot with the effects in the beginning, but I got them to work!).

    The effects work beautifully in literally every browser and on mobile devices as well – EXCEPT for IE 10 and IE 11 (go figure).
    I know you stated these only work on “modern browsers”, but I didn’t know if this was including IE.
    If not – is there a fix for this?

    In IE11 – a few of the boxes just don’t appear on the page at all, they’re completely blank (tho others appear fine).
    In IE10 – they appear perfectly until you hover over them – then it turns 100% gray instead of their ‘effect’.

    I can send the test site url if you’d like to review.

    Any help or advice would be greatly appreciated! 🙂

    Thank you for your time!
    Mary

  36. Hi! I love all these! But i have no idea where to put the code. Is there an installation guide?

    Thanks!

  38. How do you make the “View More” with the href not be displayed in lily effect? The effect is working but the view more pops up and can be seen.

  39. For some reason the View More text is coming up on my site. What controls that and why does not display that text in the demo?